<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17.2.3-Fragment 的稳定性</title>
</head>
<body>
    <!-- 参考例子 1 -->
    <div>
        <p v-for="item in list">{{ item }}</p>
        <i>{{ foo }}</i>
        <i>{{ bar }}</i>
    </div>

</body>
    <script>
        /**
         * Fragment 本身收集的动态节点仍然面临结构不稳定的情况
         * - 所谓结构不稳定，从结果上看，
         *   指的是更新前后一个 block 的 dynamicChildren 数组中收集的动态节点的数量或顺序不一致
         * 
         * 怎么办
         * - 只能放弃根据 dynamicChildren 数组中的动态节点进行靶向更新的思路，并回退到传统虚拟 DOM 的 Diff 手段
         * - 直接使用 Fragment 的 children 而非 dynamicChildren 来进行 Diff 操作
         * 
        */

        /**
         * Fragment 的子节点（children）仍然可以是由 Block 组成的数组
         * - 当 Fragment 的子节点进行更新时，就可以恢复优化模式
         * 
         * */  
        const block = {
            tag: Fragment,
            children: [
                { tag: 'p', children: item, dynamicChildren: [/*...*/], /* TEXT */ },
                { tag: 'p', children: item, dynamicChildren: [/*...*/], /* TEXT */ },
            ]
        }

        /**
         * 稳定的 Fragment
         * - 表达式 10 和 'abc' 是常量
         * - 无论怎样更新，上面两个 Fragment 都不会变化。因此这两个 Fragment 是稳定的
        
        */
            `
            <p v-for="n in 10"></p>
            <!-- 或者 -->
            <p v-for="s in 'abc'"></p>
            `

        /**
         * 当模板中存在多个根节点时，我们需要使用 Fragment 来描述它
         * - 用于描述具有多个根节点的模板的 Fragment 也是稳定的
        */
        `
        <template>
            <div></div>
            <p></p>
            <i></i>
        </template>
        `

         

    </script>
</html>